import React, { useMemo } from 'react';
import { RightPanelProps } from '../../types';
import KeyInfoItem from './KeyInfoItem';

const RightPanel: React.FC<RightPanelProps> = ({ isOpen, width, gameHistory, currentTurnIndex, handleTurnKeyInfoSave }) => {
  const isLargeScreen = window.matchMedia("(min-width: 1024px)").matches;

  const memoizedKeyInfoItems = useMemo(() => {
    return gameHistory.map((turn, index) => (
      <KeyInfoItem
        key={turn.id}
        turn={turn}
        index={index}
        currentTurnIndex={currentTurnIndex}
        onSave={handleTurnKeyInfoSave}
      />
    ));
  }, [gameHistory, currentTurnIndex, handleTurnKeyInfoSave]);

  return (
    <div
      className="bg-gray-800 rounded-lg shadow-md flex-col w-full lg:w-auto"
      style={isLargeScreen ? {
        width: isOpen ? `${width}%` : '0%',
        transition: 'width 0.3s ease-in-out',
        flexShrink: 0,
        overflow: 'hidden',
      } : { display: isOpen ? 'flex' : 'none' }}
    >
      <div className={`overflow-y-auto h-full w-full p-3 sm:p-4 transition-opacity duration-300 ${isLargeScreen && !isOpen ? 'opacity-0' : 'opacity-100'}`}>
        <h3 className="text-lg font-semibold mb-3 text-green-300 border-b border-gray-700 pb-2">关键信息摘要</h3>
        <div className="space-y-2">
          {gameHistory.length === 0 && <p className="text-gray-500 italic">尚无历史回合。</p>}
          {memoizedKeyInfoItems}
        </div>
      </div>
    </div>
  );
};

export default RightPanel;
